<template>
	<view class="category-container">
		<view class="search-section">
			<uni-search-bar
				v-model="searchKeyword"
				placeholder="搜索电影..."
				@confirm="handleSearch"
				:focus="false"
				bgColor="#ffffff"
				color="#333333"
			></uni-search-bar>
		</view>
		
		<view class="category-tabs">
			<scroll-view scroll-x="true" class="tab-scroll">
				<view class="tab-list">
					<view 
						v-for="(category, index) in categories" 
						:key="index"
						class="tab-item"
						:class="{ active: currentCategory === category.id }"
						@click="switchCategory(category.id)"
					>
						{{ category.name }}
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="movie-grid">
			<view 
				v-for="movie in filteredMovies" 
				:key="movie.id"
				class="movie-item"
				@click="goToDetail(movie)"
			>
				<image :src="movie.poster" class="movie-poster" mode="aspectFill"></image>
				<view class="movie-info">
					<text class="movie-title">{{ movie.title }}</text>
					<text class="movie-year">{{ movie.year }}</text>
					<view class="movie-rating">
						<uni-rate :value="movie.rating / 2" size="12" readonly></uni-rate>
						<text class="rating-text">{{ movie.rating }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="filteredMovies.length === 0" class="empty-state">
			<uni-icons type="film" size="80" color="#666666"></uni-icons>
			<text class="empty-text">暂无相关电影</text>
		</view>

		<!-- 自定义底部导航栏 -->
		<custom-tabbar :current="1"></custom-tabbar>
	</view>
</template>

<script>
import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
import { useMovieStore } from '@/stores/movie.js'

export default {
	components: {
		CustomTabbar
	},
	data() {
		return {
			searchKeyword: '',
			currentCategory: 'all'
		}
	},
	setup() {
		const movieStore = useMovieStore()
		return {
			movieStore
		}
	},
	computed: {
		categories() {
			return this.movieStore.categories
		},
		movies() {
			return this.movieStore.movies
		},
		filteredMovies() {
			let movies = this.movies

			// 按分类筛选
			if (this.currentCategory !== 'all') {
				movies = movies.filter(movie => movie.category === this.currentCategory)
			}

			// 按搜索关键词筛选
			if (this.searchKeyword.trim()) {
				movies = movies.filter(movie =>
					movie.title.toLowerCase().includes(this.searchKeyword.toLowerCase())
				)
			}

			return movies
		}
	},
	onLoad() {
		this.checkLoginStatus()
		this.initData()
	},
	onShow() {
		this.checkLoginStatus()
		this.initData()
	},
	methods: {
		// 初始化数据
		initData() {
			this.movieStore.initMovieData()
		},

		checkLoginStatus() {
			const userInfo = uni.getStorageSync('userInfo')

			// 如果没有登录信息，跳转到登录页
			if (!userInfo || (!userInfo.isLogin && !userInfo.isGuest)) {
				uni.redirectTo({
					url: '/pages/login/login'
				})
				return false
			}
			return true
		},

		switchCategory(categoryId) {
			this.currentCategory = categoryId
		},
		
		handleSearch() {
			// 搜索逻辑已在computed中处理
			console.log('搜索关键词:', this.searchKeyword)
		},
		
		goToDetail(movie) {
			uni.navigateTo({
				url: `/pages/detail/detail?id=${movie.id}`
			})
		}
	}
}
</script>

<style scoped>
.category-container {
	background: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 120rpx; /* 为底部导航栏留出空间 */
}

.search-section {
	padding: 20rpx;
	background: #ffffff;
	border-bottom: 1rpx solid #e0e0e0;
}

.category-tabs {
	background: #ffffff;
	border-bottom: 1rpx solid #e0e0e0;
}

.tab-scroll {
	white-space: nowrap;
}

.tab-list {
	display: flex;
	padding: 0 20rpx;
}

.tab-item {
	padding: 20rpx 30rpx;
	color: #666666;
	font-size: 28rpx;
	white-space: nowrap;
	border-bottom: 4rpx solid transparent;
	transition: all 0.3s;
}

.tab-item.active {
	color: #ff6b35;
	border-bottom-color: #ff6b35;
}

.movie-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
	padding: 20rpx;
}

.movie-item {
	background: #ffffff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.movie-poster {
	width: 100%;
	height: 400rpx;
}

.movie-info {
	padding: 20rpx;
}

.movie-title {
	color: #333333;
	font-size: 28rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}

.movie-year {
	color: #999999;
	font-size: 24rpx;
	display: block;
	margin-bottom: 15rpx;
}

.movie-rating {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.rating-text {
	color: #ff6b35;
	font-size: 24rpx;
	font-weight: bold;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 100rpx 20rpx;
}

.empty-text {
	color: #666666;
	font-size: 28rpx;
	margin-top: 20rpx;
}
</style>
